<script>
export default {
    name:'RsTabBar',
    props:{
        value:null
    },
    data(){
        return {
            navOffset:0,
            tabs:[],
            scrollable:false,
            isScroll:false
        }
    },
    methods:{
        processItemClick(ev,tab){
            
            if( this.value !== tab.$vnode.key ){

                this.$emit('input', tab.$vnode.key);
                this.$emit("selectTab",tab);
            }
        },
        processItemClose(ev,tab){
            this.$emit("closeTab",tab);
            this.$nextTick(()=>{
                this.computeNavOffset();
            })
        },
        processItemContextMenu(ev,tab){
            this.$emit("contextmenu",ev,tab);
            ev.stopPropagation();
            ev.preventDefault();
        },
        scrollToTab(tabName){

        },
        scrollToFirst(){

            this.isScroll = false;
            this.navOffset = 0;
        },
        scrollToLast(){

            this.isScroll = true;
            this.$nextTick(()=>{
                this.computeNavOffset();
            })
        },
        leftNavClick(ev){
            this.scrollToFirst();
            ev.stopPropagation();
        },
        rightNavClick(ev){
            this.scrollToLast();
            ev.stopPropagation();
        },
        computeNavOffset(){

            const scrollable = this.scrollable;
            this.scrollable = this.canScroll();
            if( this.tabs.length > 0 && this.isScroll ){

                const tabWrap = this.$refs.tabWrap;
                const tabItems = this.$refs.tabItems;
                const tabWrapRect = tabWrap.getBoundingClientRect();
                const tabItemsRect = tabItems.getBoundingClientRect();
                if( tabItemsRect.width > tabWrapRect.width ){
                    this.navOffset = tabWrapRect.width - tabItemsRect.width;
                    if( !scrollable ){
                        this.navOffset -= 36;
                    }
                }else{
                    this.navOffset = 0;
                }
            }else{
                this.navOffset = 0;
            }
        },
        canScroll(){

            const tabBar = this.$refs.tabBar;
            const tabItems = this.$refs.tabItems;
            const tabBarRect = tabBar.getBoundingClientRect();
            const tabItemsRect = tabItems.getBoundingClientRect();
            return tabBarRect.width < tabItemsRect.width;
        },
        updateTabBar(){

            if(this.tabs.length != this.$children.length ){
                this.tabs = this.$children.map((item)=>item)
            }
            this.computeNavOffset();
        }
    },
    computed:{
        navStyle(){
            return `transform: translateX(${this.navOffset}px)`;
        }
    },
    mounted(){
        this.$on('item-click',this.processItemClick);
        this.updateTabBar();
    },
    updated(){
        this.updateTabBar();
    },
    render(h){

        const {scrollToFirst,scrollToLast,onTabClose,onTabClick,onContextmenu,navStyle,scrollable} = this;
        const navLeftBtn = scrollable?(
                <div class="left-nav" onClick={scrollToFirst}>
                    <i class="rs-icon-arrow-left-fill"></i>
                </div>
            ):'';
        const navRightBtn = scrollable?(
                <div class="right-nav" onClick={scrollToLast}>
                    <i class="rs-icon-arrow-right-fill"></i>
                </div>
            ):'';
        return (
            <div class={{'rs-tabbar':true, 'scrollable':scrollable}} ref="tabBar">
                {navLeftBtn}{navRightBtn}
                <div class="tab-wrapper" ref="tabWrap">
                    <div class="tab-container">
                        <div class="tab-items" ref="tabItems" style={navStyle}>{this.$slots.default}</div>
                    </div>
                </div>
            </div>
        )
    }
}
</script>